<template>
  <div id="app">
        <div id="main5" style="width: 100%;height:400px;"></div>
  </div>
</template>

<script>
export default {
    name: 'App',
    components: {},
    mounted() {
      this.onExample();
    },
    methods: {
      onExample() {
        let myChart  = this.$echarts.init(document.getElementById('main5'));
        var option = {
            tooltip: {
            trigger: 'axis',
        },
        color: ['#0078ff', '#00ffcc','#FF6262'], //两条折线的颜色
        legend: {
            data: [
            {
                name: '居民数量',
                icon: 'circle', // 图例的图标样式
                /*
                这个图标样式我在官网上只找到了实心圆,或者空心圆加一条横线,我们设计图上要求是空心圆,
                我暂时不知道要怎么做,如果有朋友知道,可以告诉我.
        */ 
            },
            {
                name: '签约量',
                icon: 'circle',
            },
            {
                name: '服务量',
                icon: 'circle',
            }
            ],
            top: '10%',
            right: '10%',
            textStyle: { //图例的文字样式
            color: 'black',
            },
        },

        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: ['1/4', '1/5', '1/6', '1/7', '1/8', '1/9', '1/10'],
            // 轴线的字体样式
            axisLabel: {
            show: true,
            textStyle: {
                color: 'grey',
                // fontSize: 16, 可直接写数字,单位px
            },
            },
            // 轴线的样式
            axisLine: {
            lineStyle: {
                color: '#F4F4F4',
            },
            },
            // 网格线样式
            splitLine: {
            show: false,
            lineStyle: {
                color: ['#F4F4F4'],
            },
            },
            axisTick: {
            show: true, // 不显示坐标轴刻度
            },
        },
        yAxis: {
            type: 'value',
            name: '人', // y轴的单位,不写就没有
            nameTextStyle: { //单位'个'的样式
            color: '#F4F4F4',
            padding: [0, 0, 0, -56], // 用来移动单位的位置对齐
            },
            axisLabel: { 
            show: true,
            textStyle: {
                color: 'grey',
            },
            margin: 18, //轴线上的文字与线的距离
            },
            axisLine: {
            lineStyle: {
                color: '#F4F4F4',
            },
            },
            splitLine: {
            show: true,
            lineStyle: {
                color: ['#F4F4F4'],
                
            },
            },
        },
        series: [
            {
            name: '居民数量',
            type: 'line',
            data: [225,200,150,200,250,150,210],
            },
            {
            name: '签约量',
            type: 'line',
            data: [200, 120, 100, 131,210, 110, 160],
            },
            {
            name: '服务量',
            type: 'line',
            data: [220,100,110,100,150,90,150],
            }
        ],
        };
        myChart.setOption(option);
    }
    
}
}
</script>

<style>
</style>